<script lang="ts" setup>
  import { PropType,ref,computed } from 'vue'
  import { propTypes } from '@/utils/propTypes'

  defineOptions({ name: 'ImageViewer' })

  const props = defineProps({
    urlList: {
      type: Array as PropType<string[]>,
      default: (): string[] => []
    },
    zIndex: propTypes.number.def(200),
    initialIndex: propTypes.number.def(0),
    infinite: propTypes.bool.def(true),
    hideOnClickModal: propTypes.bool.def(false),
    appendToBody: propTypes.bool.def(false),
    show: propTypes.bool.def(false)
  })

  const getBindValue = computed(() => {
    const propsData: Recordable = { ...props }
    delete propsData.show
    return propsData
  })

  const show = ref(props.show)

  const close = () => {
    show.value = false
  }
</script>

<template>
  <ElImageViewer v-if="show" v-bind="getBindValue" @close="close" />
</template>
